<template>
    <div class="login_container">
        <!-- 登录盒子 -->
        <div class="login_box">
            <!-- 头像框 -->
            <div class="avatar_box">
                <img src="../assets/tou.jpg" alt="">
            </div>
            <!-- 登录表单区域 -->
            <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login_form">
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="el-icon-user" clearable>
                    </el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="password">
                    <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"
                        prefix-icon="el-icon-lock" clearable>
                    </el-input>
                </el-form-item>
                <!-- 按钮组 -->
                <el-form-item class="login_btns">
                    <el-link type="success" :underline="false" href="http://pyg.h1234.top" class="shop_index">商城首页
                    </el-link>
                    <el-button type="primary" round @click="login()" @keyup.enter="keyDown(e)">登录</el-button>
                    <el-button type="info" round @click="resetLoginForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 登录表单的数据绑定对象
            loginForm: {
                username: 'admin',
                password: '123456'
            },
            // 登录表单的验证规则对象
            loginRules: {
                username: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' },
                    { min: 2, max: 11, message: '长度在2到11个字符' }
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                    { min: 6, max: 15, message: '长度在6到15个字符' }
                ]
            }
        }
    },
    methods: {
        // 登录
        login() {
            // 拿到表单引用对象，对整个表单进行校验
            this.$refs.loginFormRef.validate(async valid => {
                if (valid === true) {
                    // 表单验证通过，发起登录请求
                    // 返回的是promise对象，使用async await简化操作
                    // 并且回来的东西中只需要data，所以使用{data}进行解构赋值,并重命名为res
                    const { data: res } = await this.$http.post('login', this.loginForm);
                    if (res.meta.status !== 200) {
                        // 失败
                        this.$message.error(res.meta.msg);
                    } else {
                        // 成功
                        this.$message.success(res.meta.msg);
                        // 除了登录之外的其他任何api接口，必须在登录之后携带token才能访问
                        // 将服务器返回给我们的token令牌保存在SessionStorage中
                        // LocalStorage是长时间有效，而SessionStorage只在会话期间有效
                        window.sessionStorage.setItem('token', res.data.token);
                        // 通过编程式导航跳转到后台主页
                        this.$router.push('/home');
                    }
                }
            });
        },
        // 重置
        resetLoginForm() {
            // 拿到表单引用对象，对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
            this.$refs.loginFormRef.resetFields();
        },
        // 回车键登录
        keyDown(e) {
            //如果是回车则执行登录方法
            if (e.keyCode == 13) {
                this.login();
            }
        },
    },
    // 回车键登录 绑定监听事件
    mounted() {
        window.addEventListener('keydown', this.keyDown);
    },
    // 回车键登录 摧毁事件
    destroyed() {
        window.removeEventListener('keydown', this.keyDown, false);
    }
}
</script>

<style lang="less" scoped>
// 登录页面
.login_container {
    background-color: #2b4b6b;
    height: 100%;
}

// 登录盒子
.login_box {
    position: absolute;
    top: 50%;
    left: 50%;
    // 适配一些旧版本浏览器
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 10px;
}

// 头像框
.avatar_box {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    height: 130px;
    background-color: #fff;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #eee;
}

// 头像
.avatar_box img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    // 谁做动画给谁加，动画加在本身上
    transition: all 1s;
}

// 伪类选择器，鼠标经过头像旋转360deg
.avatar_box img:hover {
    transform: rotate(360deg);
}

// 登录表单区域
.login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

// 按钮组
.login_btns {
    // 给父级开启弹性盒模型
    display: flex;
    // 设置主轴方向
    flex-direction: row;
    // 设置主轴对齐方式
    justify-content: flex-end;
}

// 商城首页
.shop_index {
    margin-right: 190px;
}
</style>
